@import "../../styles/variables.scss";

@keyframes rotateZ{
  0%{transform:rotateZ(0deg);}
  100%{transform:rotateZ(360deg);}
}

//size 为 small 时的样式
$mute-btn-small-padding: 6px 8px;
$mute-btn-small-fontSize: 12px;

//size 为 large 时的样式
$mute-btn-large-padding: 10px 16px;
$mute-btn-large-fontSize: 16px;

@mixin animate($mainColor) {
  &::after{
    content: "";
    display: block;
    width: 99%;
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba($color: $mainColor, $alpha: 1);
    border-radius: $border-radius-base;
    z-index: 0;
  }

  &[class~="mute-btn-active"] {
    &::after {
      width: calc(100% + 12px);
      height: calc(100% + 12px);
      background-color: rgba($color: $mainColor, $alpha: 0);
      transition: all .8s;
    }
  }
}

@mixin loading($fill) {
  &[class~="mute-btn-loading"] {
    i {
      justify-content: flex-start;
      
      svg {
        animation-name: rotateZ;
        animation-duration: 1s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
        fill: $fill;
      }
    }
  }
}

@mixin button($mainColor) {
  border-color: $mainColor;
  background-color: $mainColor;

  .mute-btn-text {
    color: #fff;
    transition: all .4s;
    background-color: $mainColor;
    text-shadow: 0 -1px 0 rgba($color: #000000, $alpha: .2);
  }

  &:hover {
    border-color: lighten($mainColor, 8);
    background-color: lighten($mainColor, 8);

    .mute-btn-text {
      background-color: lighten($mainColor, 8);
    }
  }

  &:active {
    border-color: darken($mainColor, 8);
    background-color: darken($mainColor, 8);

    .mute-btn-text {
      background-color: darken($mainColor, 8);
    }
  }

  &[class~="mute-btn-loading"] {
    cursor: default;
    border-color: lighten($mainColor, 16);
    background-color: lighten($mainColor, 16);

    .mute-btn-text {
      background-color: lighten($mainColor, 16);
    }

  } 
  @include loading(#fff);
}

.mute-btn {
  cursor: pointer;
  padding: 0;
  border: 1px solid transparent;
  outline: none;
  background-color: transparent;
  position: relative;
  border-radius: $border-radius-base;
  transition: all .4s;
  white-space: nowrap;
  user-select: none;
  flex-grow: 0;
  flex-shrink: 0;

  .mute-btn-text {
    display: block;
    padding: 8px 12px;
    font-size: $font-size-base;
    position: relative;
    border-radius: $border-radius-base;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .mute-btn-icon {
      position: relative;
      width: 1.5em;
      
      i {
        font-style: normal;
        text-shadow: none;
        background-color: transparent;
        position: absolute;
        font-size: 1.2em;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 1.2em;
        height: 1.2em;
        line-height: 1.2em;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
  
  &[class~="mute-btn-default"] {
    border-color: $border-color-base;
    background-color: #fff;

    .mute-btn-text {
      color: $heading-color;
      transition: all .4s;
      background-color: #fff;
    }

    &:hover {
      border-color: $primary-color;
      
      .mute-btn-text {
        fill: $primary-color;
        color: $primary-color;
      }
    }

    &:active {
      border-color: darken($primary-color, 10);

      .mute-btn-text {
        color: darken($primary-color, 10);
      }
    }

    &[class~="mute-btn-loading"] {
      cursor: default;
      border-color: lighten($primary-color, 16);
      color: lighten($primary-color, 16);

      &:hover {
        color: lighten($primary-color, 16);
        border-color: lighten($primary-color, 16);
      }

      &:active {
        color: lighten($primary-color, 16);
        border-color: lighten($primary-color, 16);
      }

      .mute-btn-text {
        color: lighten($primary-color, 16);
        fill: lighten($primary-color, 16);
      }
    }

    @include animate($primary-color);
    @include loading(inherit);
  }

  &[class~="mute-btn-primary"] {
    @include button($primary-color);
    @include animate($primary-color);
  }

  &[class~="mute-btn-success"] {
    @include button($success-color);
    @include animate($success-color);
  }

  &[class~="mute-btn-warning"] {
    @include button($warning-color);
    @include animate($warning-color);
  }

  &[class~="mute-btn-danger"] {
    @include button($error-color);
    @include animate($error-color);
  }

  &[class~="mute-btn-link"] {
    .mute-btn-text {
      color: $primary-color;
      transition: all .4s;
    }

    &:hover {
      .mute-btn-text {
        color: lighten($primary-color, 10);
      }
    }

    &:active {
      .mute-btn-text {
        color: darken($primary-color, 10);
      }
    }
  }

  &[class~="mute-btn-small"] {
    .mute-btn-text {
      padding: $mute-btn-small-padding;
      font-size: $mute-btn-small-fontSize;
    }
  }

  &[class~="mute-btn-large"] {
    .mute-btn-text {
      padding: $mute-btn-large-padding;
      font-size: $mute-btn-large-fontSize;
    }
  }

  &[class~="mute-btn-block"] {
    width: 100%;
  }

  &[disabled] {
    border-color: $disabled-color;
    background-color: #fff;
    cursor: not-allowed;
    color: $disabled-color;

    .mute-btn-text {
      background: #fff;
      text-shadow: none;
      color: $disabled-color;
    }

    &:hover {
      background: #fff;
      color: $disabled-color;
      border-color: $disabled-color;

      .mute-btn-text {
        background: #fff;
        color: $disabled-color
      }

      &::after {
        background: #fff;
      }
    }

    &[class~="mute-btn-link"][disabled] {
      border-color: lighten($disabled-color, 70);
      background-color: lighten($disabled-color, 70);

      &::after {
        background-color: lighten($disabled-color, 70);
      }

      .mute-btn-text {
        background-color: lighten($disabled-color, 70);
        border-radius: 3px;
      }
    }
  }
}